<template>
  <div>
    <el-dialog title="选择打印模板" width="30%"
               :visible="templateVisible"
               :append-to-body="true"
    >

      <template>
        <el-select v-model="printPage" placeholder="请选择打印模板">
          <el-option
            v-for="item in printPages"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>

      <template slot="footer">
        <el-button size="small" type="primary" @click="handleTemplateOk">
          确定
        </el-button>
        <el-button size="small" type="danger" @click="templateVisible = false">
          取消
        </el-button>
      </template>
    </el-dialog>

    <el-dialog class="printDialog" title="打印预览" width="80%"
               :visible.sync="visible"
               :append-to-body="true"
    >
      <iframe ref="win" class="printDialogFrame" :src="printPage"></iframe>
      <template slot="footer">
        <el-button size="small" type="primary" @click="handleOk">
          确定
        </el-button>
      </template>
    </el-dialog>
    <iframe v-if="print" ref="win" class="printDialogFrame" :src="printPage"></iframe>
  </div>
</template>

<script>
export default {
  name: 'printDialog',
  data() {
    return {
      templateVisible: false,
      visible: false,
      print: false,
      handleTemplateOk: () => {
      },
      printPage: 'print1.html',
      printPages: [
        {value: 'print1.html', label: '模板1'},
        {value: 'print2.html', label: '模板2'},
        {value: 'print3.html', label: '模板3'}
      ]
    }
  },
  watch: {
    visible() {
      // if (!this.visible) {
      //   const doc = this.R.path(['contentWindow', 'document'], this.$refs.win)
      //
      //   if (!this.R.isNil(doc)) {
      //     const body = doc.querySelector('body')
      //
      //     if (!this.R.isNil(body)) {
      //       body.innerHTML = ''
      //     }
      //   }
      // }
    }
  },
  methods: {
    openPrintDialog(showPreviewFunc, print = false) {
      if (this.R.isNil(showPreviewFunc)) {
        return
      }
      this.print = print

      if (!this.print) {
        this.visible = true
      }
      this.$nextTick(() => {
        const wind = this.$refs.win.contentWindow

        if (this.R.isNil(wind)) {
          return
        }
        // wind.document.body.innerText = ''

        setTimeout(() => {
          showPreviewFunc(wind)
          wind.print()
        }, 200)
      })
    },
    handleOk() {
      this.visible = false
    },
    openPrintDialogV2(printModel, print = false) {
      this.templateVisible = true;

      this.handleTemplateOk = () => {
        this.templateVisible = false;

        if (this.R.isNil(printModel)) {
          return
        }
        this.print = print

        if (!this.print) {
          this.visible = true
        }
        this.$nextTick(() => {
          const wind = this.$refs.win.contentWindow

          if (this.R.isNil(wind)) {
            return
          }
          setTimeout(() => {
            const funcName = this.printPage.slice(0, this.printPage.indexOf('.html'))

            if (printModel[funcName] instanceof Function) {
              printModel[funcName](wind)
              wind.print()
            } else {
              this.$message.error(`暂不支持该模板 ${funcName}`)
            }
          }, 200)
        })
      }
    }
  },
  mounted() {
    this.$vBus.$on('SHOW_PRINT_DIALOG', this.openPrintDialog)
    this.$vBus.$on('SHOW_PRINT_DIALOG_V2', this.openPrintDialogV2)
  },
  beforeDestroy() {
    this.$vBus.$off('SHOW_PRINT_DIALOG', this.openPrintDialog)
    this.$vBus.$on('SHOW_PRINT_DIALOG_V2', this.openPrintDialogV2)
  }
}
</script>

<style>
.printDialog {
  padding: 0;
  height: 600px;
}
</style>

<style scoped>
.printDialogFrame {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
